/* eslint-disable import/first */
import React, { useState, useEffect } from 'react'
import { View, ScrollView } from '@tarojs/components'
import Taro, {useShareAppMessage, useShareTimeline, } from '@tarojs/taro'
import Swiper from './swiper/index'
import api from '../../http/api'
import ToLogin from '../../compontents/toLogin'
// eslint-disable-next-line import/first
import { AtSearchBar } from 'taro-ui'
import Article from '../../compontents/article'
// eslint-disable-next-line import/first
import "taro-ui/dist/style/components/tab-bar.scss"
import "taro-ui/dist/style/components/badge.scss"
import "taro-ui/dist/style/components/icon.scss";
import Navbar from '../../compontents/navbar/index'
import NavTab from './navTab'
import locationApi from './http/api'
import Find from './find/index'
// import "taro-ui/dist/style/components/tab-bar.scss";

import './index.less'


export default (props: any) => {
  // 动态数据
  const [data, setData] = useState({ "id": 1, "srcs": "https://static.zhongningwenhua.com/uniSchool/upload/72de9170e46b048cf2a4f4bddfbe649f.png&https://static.zhongningwenhua.com/uniSchool/upload/ebe3852a65761f0eddc989bacd9c475b.png", "src": "https://static.zhongningwenhua.com/uniSchool/upload/d285fe537dc2deb8597e74f454afce9d.png" })
  const [tabIndex, setTabIndex] = useState(0)
  const tabList = ['推荐', '发现', '关注']
  const [articleList, setArticleList] = useState([])
  const [isIphoneX, setIsIphoneX] = useState(false)
  const [scTypeId, setScTypeId] = useState(1)
  const info: any = Taro.getStorageSync('info')
  const uSchoolId = info ? JSON.parse(info).userInfo.uSchoolId : 0
  const [pageNo, setPageNo] = useState(1)
  const [findPageNo, setFindPageNo] = useState(1)
  const [total, setTotal] = useState(0)
  const [dataList, setDataList]: any = useState([])
  const [findTotal, setFindTotal] = useState(0)
  useEffect(() => {
    api.version().then((res: any) => {
      const version = res.data
      if (version === 1) {
        api.indexInfo({ uSchoolId }).then((resData: any) => {
          setData(resData.data)
        })
      }
    })
    getDataList()

    Taro.getSystemInfo({
      success: res => {
        if (res.safeArea.top > 20) {
          setIsIphoneX(true)
        }
      }
    }).then()
  // eslint-disable-next-line react-hooks/exhaustive-deps
  },[])
  //滚动条触底加载
  const scrollBtm = () => {
    scrollData()
    scrollFindData()
  }
  useShareAppMessage(res => {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: 'U你校园',
      path: '/pages/index/index'
    }
  })
  useShareTimeline(() => {
    return {
      title: 'U你校园',
      path: '/pages/index/index',
      query: ''
    }
  })
  //搜索
  const onChange = () => {

  }
  // 点击tab
  const tabClick = (i: number) => {
    setTabIndex(i)
    if (i === 1) {
      getFindData()
    }
  }
  //获取列表数据
  const getDataList = async () => {
    const params = {
      uSchoolId: uSchoolId,
      pageNo: pageNo,
      pageSize: 3
    }
    const res: any = await locationApi.scAticleTop(params)
    setArticleList(res.data.list)
    setTotal(res.data.total)
  }
  //滚动加载推荐
  const scrollData = async () => {
    if (articleList.length < total && tabIndex !== 1) {
      setPageNo(pageNo + 1)
      const params = {
        uSchoolId: uSchoolId,
        pageNo: pageNo,
        pageSize: 3
      }
      const res: any = await locationApi.scAticleTop(params)
      setArticleList(articleList.concat(res.data.list))
    }

  }
  //获取发现列表数据
  const getFindData = async () => {
    const params = {
      uSchoolId: uSchoolId,
      pageNo: 1,
      pageSize: 2,
      scTypeId: scTypeId
    }
    const res: any = await locationApi.scAticleFind(params)
    setFindTotal(res.data.total)
    setDataList([...res.data.list])
  }
  //滚动加载发现
  const scrollFindData = async () => {
    if (dataList.length < findTotal && tabIndex === 1) {
      setFindPageNo(findPageNo + 1)
      const params = {
        uSchoolId: uSchoolId,
        pageNo: findPageNo + 1,
        pageSize: 2,
        scTypeId: scTypeId
      }
      const res: any = await locationApi.scAticleFind(params)
      setDataList(dataList.concat([...res.data.list]))

    }

  }
  //子传父
  const id =async(type:any)=>{
    setScTypeId(type)
    const params = {
      uSchoolId: uSchoolId,
      pageNo: 1,
      pageSize: 2,
      scTypeId: type
    }
    const res: any = await locationApi.scAticleFind(params)
    setFindTotal(res.data.total)
    setDataList([...res.data.list])
    setFindPageNo(1)
  }
  return (
    <View className={isIphoneX ? 'wrap wrapX flex flex-direction' : 'wrap flex flex-direction'}>
      <ToLogin url='/pages/index/index'></ToLogin>
      <View className='selectTop'>
        <View className='topBar'>
          <AtSearchBar
            className='search'
            placeholder='请输入用户名或相关信息'
            // eslint-disable-next-line jsx-quotes
            value=""
            onChange={onChange}
          />
          <View className='tabUl'>
            {
              tabList.map((item: any, i: number) => (
                <View key={i} className={tabIndex === i ? 'tabLi active' : 'tabLi'} onClick={() => { tabClick(i) }}>{item}</View>
              ))
            }
          </View>
        </View>
        {
          tabIndex === 1 ? <NavTab schoolId={uSchoolId} data={id}></NavTab> : ''
        }
      </View>
      <ScrollView onScrollToLower={scrollBtm} lowerThreshold={50} scrollY className='flex1 contentBox'>
        <View className='swiperWrap '>
          <Swiper data={data} />
        </View>
        {
          tabIndex !== 1 ? <View className='articleUl'>
            {
              articleList.map((item: any,i:number) => (
                <View key={i} className='articleLi'>
                  <Article list={item} />
                </View>
              ))
            }
          </View> : <Find schoolId={uSchoolId} dataList={dataList}></Find>
        }

      </ScrollView>
      <Navbar></Navbar>
    </View>
  );
};
